<template>
  <div class="mycomment">
    <div class="tablistbox">
        <a href="javascript:void(0);" :class="index==isactive?'active':''" @click="handelchange(index)" :key="index" v-for="(item,index) in tablist">{{ item.name }}</a>
    </div>
        <myoutput :is="currentView" keep-alive></myoutput>
  </div>
</template>

<script>
import getin from '@/components/comment/getin.vue';
import myoutput from '@/components/comment/myoutput.vue';

export default {
  name: 'mycomment',
  data() {
    return {
      isactive: 0,
      tablist: [
        {name: '发出的评论'}
        // {name: '收到的评论'}
      ],
      currentView: 'myoutput'
    };
  },
  components: {
    getin,
    myoutput
  },
  methods: {
    handelchange(index) {
      this.isactive = index;
      if (index === 0) {
        this.currentView = 'myoutput';
      } else {
        this.currentView = 'getin';
      }
    }
  }
};
</script>

<style lang="less" scoped>
.mycomment{
  margin: 20px;
  position: relative;
  a{
    color: #555;
    width: 140px;
    height: 55px;
    border: 1px solid #ececec;
    line-height: 55px;
    font-size: 14px;
    text-align: center;
    background: #FFFFFF;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #ECECEC;
    display: inline-block;
  }
  .active{
    position: relative;
    width: 140px;
    height: 65px;
    line-height: 70px;
    font-size: 18px;
    font-weight: bolder;
    border-bottom: none;
    box-shadow: 1px -2px 3px 0 #99999980;
  }
}
</style>
